<template>
	<view class="conter">
		<u--image width="680rpx" height="680rpx" radius="14rpx" :src="imgUrl + mondetail.drawVideo" class="img"></u--image>
		<!-- 关于 -->
		<view class="boutone">关于</view>
		<!-- 详细 -->
		<view class="love">
			<view style="display: flex">
				<view class="zheng" v-if="mondetail.raceName">
					<text :style="getRaceTextStyle(mondetail.raceName)">{{ mondetail.raceName }}</text>
				</view>
				<view v-else>
					<view class="zheng" style="font-weight: 800">未知</view>
				</view>
				<view class="xiang" v-if="mondetail.number">
					<view v-if="mondetail.raceName">
						<view :style="getRaceTextStyle(mondetail.raceName)">#{{ mondetail.number }}</view>
					</view>
					<text v-if="!mondetail.raceName">#{{ mondetail.number }}</text>
				</view>
			</view>
			<view class="popo_box">
				<view class="image_box">
					<view>
						<u--image width="105rpx" height="105rpx" radius="50%" :src="imgUrl + mondetail.avatar" mode=""></u--image>
					</view>
					<view class="iove_box">
						<view>拥有者</view>
						<view style="color: #8a92a3; margin-top: 5rpx; width: 150rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
							{{ mondetail.nickName }}
						</view>
					</view>
				</view>
				<view class="price">
					<view style="font-size: 32rpx">当前价格</view>
					<view style="margin-top: 5rpx">
						<text>￥</text>
						{{ mondetail.consignmentPrice ? mondetail.consignmentPrice : 0 }}
						<text>.00</text>
					</view>
				</view>
			</view>

			<view class="sale-btn">
				<view @click="goMonPurchase()" class="sub-btn fuhua" v-if="mondetail.isHunting == 0 && mature != 0 && mondetail.memberInfoId == admin.id">立即寄售</view>
				<view @click="goMonPurchase()" class="sub-btn" v-if="mondetail.isHunting == 0 && mature == 0 && mondetail.memberInfoId == admin.id">立即寄售</view>
				<view @click="onHunt" class="fuhua" v-if="mondetail.isHunting == 2">上任中</view>

				<view @click="goincubation" class="sub-btn" v-if="mature == 0 && time <= 0 && mondetail.memberInfoId == admin.id && mondetail.isHunting != 1">立即孵化</view>
				<view @click="cancelSale" class="sub-btn" style="margin-right: 35rpx" v-if="mature == 0 && mondetail.isHunting == 1 && mondetail.memberInfoId == admin.id">
					取消寄售
				</view>
				<view class="sub-btn" v-if="mature == 0 && time > 0">
					<u-count-down :time="time" format="HH:mm:ss"></u-count-down>
				</view>
				<view @click="cancelSale" class="fuhua" v-if="mature == 1 && mondetail.isHunting == 1 && mondetail.memberInfoId == admin.id">取消寄售</view>
			</view>
		</view>
		<!-- 蛋蛋 -->
		<!-- 		<view class="">
			<u--image v-if="loading" width="750rpx" height="100vh" style="position: absolute; top: 0; z-index: 1000" :src="eggImg"></u--image>
			<u--image v-if="eggloading" width="750rpx" height="100vh" style="position: absolute; top: 0; z-index: 1000" :src="babyImg"></u--image>
			<u--image
				v-if="eggloading"
				width="200rpx"
				height="200rpx"
				radius="14rpx"
				style="position: absolute; top: 40%; z-index: 10000; left: 38%"
				:src="imgUrl + mondetail.drawVideo"
			></u--image>
		</view> -->
		<!-- 蛋蛋 -->
		<!-- 家谱 -->
		<view class="genealogy_box">
			<view class="boutne">家谱</view>
			<view class="parents">父母</view>
			<view v-if="parents != 0">
				<view class="mon_baby" v-for="(item, index) in parents" :key="index">
					<view class="allmon" @click="goparentsDetail(item)">
						<image style="border-radius: 14rpx" :src="imgUrl + item.image2" mode=""></image>
					</view>
					<view class="number_mon">
						<view style="color: #ffffff; font-weight: 700">{{ item.name }}</view>
						<view class="babymon_number">
							<!-- <image class="img-box" :src="getRaceImageSrc(item.raceName)" mode=""></image> -->
							<view :style="getRaceTextStyle(item.raceName)">#{{ item.id }}</view>
							<text v-if="!item.raceName">#{{ item.id }}</text>
						</view>
					</view>
					<view @touchstart="sPopup(item, index)" @touchend="Popup" style="position: absolute; right: 34.88rpx; top: 60rpx">
						<u-icon :color="currentIndex == index ? '#ee773b' : '#606266'" name="info-circle"></u-icon>
					</view>
					<u-popup bgColor="transparent" :show="shows" @close="close" :round="6" mode="center">
						<view class="nextBreedCost1">
							<!-- 部位 -->
							<view style="display: flex">
								<view class="site_box">
									<view>背景：</view>
									<view>尾巴：</view>
									<view>背部：</view>
									<view>身体：</view>
									<view>嘴巴：</view>
									<view>眼睛：</view>
									<view>耳朵：</view>
									<view>头顶：</view>
								</view>
								<view class="all_box">
									<view style="display: flex; width: 380rpx; justify-content: space-around">
										<view style="width: 50rpx; text-align: center; height: 45rpx">D</view>
										<view style="width: 50rpx; text-align: center; height: 45rpx">R</view>
										<view style="width: 50rpx; text-align: center; height: 45rpx">R1</view>
									</view>
									<view style="display: flex; width: 380rpx; justify-content: space-around">
										<view>
											<image style="width: 50rpx; height: 45rpx" :src="imgUrl + '/static/images/d1.png'"></image>
										</view>
										<view>
											<image style="width: 50rpx; height: 45rpx" :src="imgUrl + '/static/images/d2.png'"></image>
										</view>
										<view>
											<image style="width: 50rpx; height: 45rpx" :src="imgUrl + '/static/images/d3.png'"></image>
										</view>
									</view>
									<!-- 背景 -->
									<view style="display: flex; width: 380rpx; margin-top: 20rpx; justify-content: space-around">
										<text :style="getDnaColorStyle(paerntsDnaList[0])">{{ paerntsDnaList[0] }}</text>
										<text :style="getDnaColorStyle(paerntsDnaList[1])">{{ paerntsDnaList[1] }}</text>
										<text :style="getDnaColorStyle(paerntsDnaList[2])">{{ paerntsDnaList[2] }}</text>
									</view>
									<view style="display: flex; width: 380rpx; margin-top: 20rpx; justify-content: space-around">
										<text :style="getDnaColorStyle(paerntsDnaList[6])">{{ paerntsDnaList[6] }}</text>
										<text :style="getDnaColorStyle(paerntsDnaList[7])">{{ paerntsDnaList[7] }}</text>
										<text :style="getDnaColorStyle(paerntsDnaList[8])">{{ paerntsDnaList[8] }}</text>
									</view>
									<view style="display: flex; width: 380rpx; margin-top: 20rpx; justify-content: space-around">
										<text :style="getDnaColorStyle(paerntsDnaList[9])">{{ paerntsDnaList[9] }}</text>
										<text :style="getDnaColorStyle(paerntsDnaList[10])">{{ paerntsDnaList[10] }}</text>
										<text :style="getDnaColorStyle(paerntsDnaList[11])">{{ paerntsDnaList[11] }}</text>
									</view>
									<view style="display: flex; width: 380rpx; margin-top: 20rpx; justify-content: space-around">
										<text :style="getDnaColorStyle(paerntsDnaList[12])">{{ paerntsDnaList[12] }}</text>
										<text :style="getDnaColorStyle(paerntsDnaList[13])">{{ paerntsDnaList[13] }}</text>
										<text :style="getDnaColorStyle(paerntsDnaList[14])">{{ paerntsDnaList[14] }}</text>
									</view>
									<view style="display: flex; width: 380rpx; margin-top: 20rpx; justify-content: space-around">
										<text :style="getDnaColorStyle(paerntsDnaList[15])">{{ paerntsDnaList[15] }}</text>
										<text :style="getDnaColorStyle(paerntsDnaList[16])">{{ paerntsDnaList[16] }}</text>
										<text :style="getDnaColorStyle(paerntsDnaList[17])">{{ paerntsDnaList[17] }}</text>
									</view>

									<view style="display: flex; width: 380rpx; margin-top: 20rpx; justify-content: space-around">
										<text :style="getDnaColorStyle(paerntsDnaList[18])">{{ paerntsDnaList[18] }}</text>
										<text :style="getDnaColorStyle(paerntsDnaList[19])">{{ paerntsDnaList[19] }}</text>
										<text :style="getDnaColorStyle(paerntsDnaList[20])">{{ paerntsDnaList[20] }}</text>
									</view>

									<view style="display: flex; width: 380rpx; margin-top: 20rpx; justify-content: space-around">
										<text :style="getDnaColorStyle(paerntsDnaList[21])">{{ paerntsDnaList[21] }}</text>
										<text :style="getDnaColorStyle(paerntsDnaList[22])">{{ paerntsDnaList[22] }}</text>
										<text :style="getDnaColorStyle(paerntsDnaList[23])">{{ paerntsDnaList[23] }}</text>
									</view>

									<view style="display: flex; width: 380rpx; margin-top: 20rpx; justify-content: space-around">
										<text :style="getDnaColorStyle(paerntsDnaList[24])">{{ paerntsDnaList[24] }}</text>
										<text :style="getDnaColorStyle(paerntsDnaList[25])">{{ paerntsDnaList[25] }}</text>
										<text :style="getDnaColorStyle(paerntsDnaList[26])">{{ paerntsDnaList[26] }}</text>
									</view>
									<!-- 头顶 -->
								</view>
							</view>
							<!-- 部位 -->
						</view>
					</u-popup>
				</view>
			</view>
			<view v-if="parents.length == 0">
				<image style="width: 280rpx; height: 280rpx; margin: 0 180rpx 0" src="../../static/images/fighting.gif" mode=""></image>
			</view>
			<view class="parents">子女</view>
			<view class="children">
				<view class="children-box" v-if="children.length != 0">
					<view class="disabledone" v-for="item in children" :key="item.id" @click="goparentsDetail(item)">
						<u--image width="293rpx" height="293rpx" radius="9rpx" style="padding: 0 10rpx 0 20rpx" :src="imgUrl + item.image2" mode=""></u--image>
						<view class="disabledtow">
							<text v-if="!item.raceName" style="margin: 10rpx">#{{ item.id }}</text>
							<view class="priceotow" v-if="item.raceName">
								<view :style="getRaceTextStyle(item.raceName)">#{{ item.id }}</view>
							</view>
						</view>
						<view class="disabledtow1" v-if="item.raceName">
							<view :style="getRaceTextStyle(item.raceName)">{{ item.raceName }}</view>
						</view>
					</view>
				</view>
				<view v-if="children.length == 0">
					<image style="width: 280rpx; height: 280rpx; margin: 0 180rpx 0" src="../../static/images/fighting.gif" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 家谱 -->
		<!-- 近期活动 -->
		<view class="activities_box">
			<view class="boutne">近期活动</view>
			<view v-if="rencentArr.length != 0">
				<view class="disabledone" v-for="(item, index) in rencentArr" :key="index">
					<view class="popo">
						<view>日期：{{ item.date }}</view>
						<view>价格：{{ item.price }}</view>
					</view>
					<view class="conterakpap">
						<view style="color: #8a92a3">
							<view>买方：{{ item.buyerNickname }}</view>
							<view style="display: flex; margin-top: 15rpx">
								区块链：
								<view class="done">{{ item.buyerChainAddress }}</view>
							</view>
						</view>
						<view style="display: block; color: #8a92a3">
							<view>卖方：{{ item.sellNickname }}</view>
							<view style="display: flex; margin-top: 15rpx">
								区块链：
								<view class="done">{{ item.sellChainAddress }}</view>
							</view>
						</view>
					</view>
					<view style="margin-top: 30rpx; color: #8a92a3; margin-left: 20rpx">孵化时间：{{ item.birthdayTime }}</view>
				</view>
			</view>
			<view v-if="rencentArr.length == 0">
				<image style="width:280rpx; height: 280rpx; margin: 0 180rpx 0" src="../../static/images/fighting.gif" mode=""></image>
			</view>
		</view>
		<!-- 近期活动 -->
	</view>
</template>
<script>
import config, { imgUrl, monDetailUrl } from '@/config.js';
import { getmonDetail, cancelunConsignments, hatch, getBreedTree } from '@/api/venue/venue.js';
import { getDna2 } from '@/api/work/market.js';
import { getInfo } from '@/api/login';
export default {
	data() {
		return {
			imgUrl: config.gillUrl,
			admin: '',
			bgcolor: '#606266',
			bgcolors: '#606266',
			// eggImg: '../../static/breed/kai.gif',
			// babyImg: '../../static/breed/baby.gif',
			onshow: 'true',
			itemList: [
				{
					head: '性状',
					open: true
				}
			],
			list1: [
				{
					name: '身体部位'
				},
				{
					name: '基因细节'
				}
			],
			current: 0,
			webviewStyles: {
				position: 'static'
			},
			loading: false,
			eggloading: false,
			loadingpage: false,
			itefLists: [
				{
					head: '家谱',
					open: true
				}
			],
			childLists: [
				{
					head: '孩子',
					open: true
				}
			],
			itefList: [
				{
					head: '近期活动',
					open: true
				}
			],
			id: 0,
			mondetail: {},
			time: 0,
			parents: [],
			children: [],
			isParents: 2,
			familyId: '',
			rencentArr: [],
			part: {},
			show: false,
			mp4Falg: true,
			pic: '',
			srcUrl: '',
			familyList: [],
			paerntsDnaList: [],
			shows: false,
			currentIndex: -1, // 初始值为-1，表示没有任何元素被点击
			raceImageMap: {
				恶魔: 'emo.png',
				天使: 'tianshi.png',
				植物: 'plant.png',
				元素: 'yuansu.png',
				兽族: 'shou.png',
				神族: 'god.png',
				机械: 'jixie.png',
				海洋: 'hai.png',
				精灵: 'ling.png'
				// 添加其他raceName到图片路径的映射...
			}
		};
	},
	created() {
		this.getUserWithToken();
	},
	onLoad(option) {
		this.mature = option.mature;
		if (option.isParents) {
			this.isParents = option.isParents;
		}
		this.id = option.id;
		this.familyId = option.familyId;
		this.getDetail();
	},
	methods: {
		getDnaColorStyle(dna) {
			switch (dna) {
				case '天使':
					return { color: '#3fd8d9' };
				case '恶魔':
					return { color: '#d467e0' };
				case '植物':
					return { color: '#99ff73' };
				case '元素':
					return { color: '#ff78b4' };
				case '兽族':
					return { color: '#f4a037' };
				case '神族':
					return { color: '#f8ff7f' };
				case '机械':
					return { color: '#8c8e9e' };
				case '海洋':
					return { color: '#a9dbf5' };
				case '精灵':
					return { color: '#21d1a5' };
				// 其他 DNA 类型的颜色设置
				default:
					return { color: '' };
			}
		},
		getRaceImageSrc(raceName) {
			// 如果raceName存在于映射表中，返回对应的图片路径；否则返回默认路径或占位图路径
			return this.raceImageMap[raceName] ? this.imgUrl + '/appStatic/png/' + this.raceImageMap[raceName] : this.imgUrl + '/appStatic/png/placeholder.png';
		},
		getRaceTextStyle(raceName) {
			if (raceName) {
				return {
					color: this.getRaceColor(raceName), // 调用一个方法，根据raceName获取颜色
					// 其他样式...
					fontWeight: 600
				};
			} else {
				return {
					color: '#ffffff' // 默认颜色
					// 其他样式...
				};
			}
		},
		getRaceColor(raceName) {
			// 根据raceName获取对应的颜色
			const colorMap = {
				恶魔: '#d467e0',
				天使: '#3fd8d9',
				植物: '#99ff73',
				元素: '#ff78b4',
				兽族: '#f5a037',
				神族: '#f8ff7f',
				机械: '#8c8e9e',
				海洋: '#a9dbf5',
				精灵: '#21d1a5'
			};
			return colorMap[raceName] || '#ffffff'; // 默认颜色
		},
		async sPopup(item, index) {
			// this.shows = true;
			// this.currentIndex = index; // 将当前点击的元素索引记录下来
			// let param = {};
			// param.petId = item.id;
			// const data = await getDna2(param);
			// console.log(data, 'DNA');
			// this.paerntsDnaList = data.data;
		},
		Popup() {
			this.shows = false;
			this.currentIndex = -1; // 点击结束时重置 currentIndex 为 -1，表示没有任何元素被点击
		},
		click(item) {
			this.current = item.index;
		},
		showPopup() {
			this.show = true;
			this.bgcolor = '#ed763b';
		},
		closePopup() {
			this.show = false;
			this.bgcolor = '#606266';
		},
		async getDna() {
			let param = {};
			param.petId = this.mondetail.number;
			const data = await getDna2(param);
			this.dnaList = data.data;
		},
		loadvideo() {
			setTimeout(() => {
				this.mp4Falg = false;
			}, 500);
		},
		showDialog() {
			// 视频结束后，重新播放视频
			this.mp4Falg = true;
		},
		close() {
			this.show = false;
			// console.log('close');
		},
		// 获取用户信息
		async getUserWithToken() {
			const res = await getInfo();
			this.admin = res.data;
		},
		async goincubation() {
			const data = await hatch(this.id);
			// if (data.code == 200) {
			// 	this.getDetail();
			// }
			if (data.code == 200) {
				this.getDetail();
				// this.loading = true;
				// this.onshow = false;
				// setTimeout(() => {
				// 	this.eggloading = true;
				// }, 3000);
				// let _this = this;
				// setTimeout(() => {
				// 	_this.loading = false;
				// 	_this.eggloading = true;
				// 	// 加载完成后，设置 isLoading 为 false 来隐藏加载页
				// 	uni.switchTab({
				// 		url: '/pages/work/message'
				// 	});
				// }, 8000);
			} else {
				this.$modal.msgSuccess(data.msg);
			}
		},
		async cancelSale() {
			const data = await cancelunConsignments(this.id);
			// console.log(data, '取消成功');
			if (data.code == 200) {
				this.$modal.msgSuccess('取消成功');
				this.getDetail();
			}
		},
		async getDetail() {
			if (this.isParents == 1) {
				const data = await getmonDetail(this.familyId, this.isParents);
				this.mondetail = data.data;
				console.log(this.mondetail);
				// let pic = data.data.drawVideo;
				// this.srcUrl = 'https://test.bbmon.cn/monDetail?id=' + pic;
				// console.log(this.srcUrl);
				this.getTree();
				const createTime = new Date(data.data.createTime).getTime() / 1000; // 假设 createTime 是标准时间格式
				const systemTime = data.data.systemTime; // 假设 this.systemTime 已经是秒级时间戳
				// 计算 createTime 加7天的时间戳
				const sevenDaysLater = createTime + 7 * 24 * 60 * 60; // 7天对应的秒数
				// 计算差值
				const timeDifference = sevenDaysLater - systemTime;
				this.time = Math.floor(timeDifference * 1000);
				let pic = data.data.drawVideo;
				this.srcUrl = monDetailUrl + '?id=' + pic;
			} else if (this.isParents == 2) {
				const data = await getmonDetail(this.id, this.isParents);
				this.mondetail = data.data;
				console.log(this.mondetail);
				this.rencentArr = data.data.babyActivity;
				this.getTree();
				const createTime = new Date(data.data.createTime).getTime() / 1000; // 假设 createTime 是标准时间格式
				const systemTime = data.data.systemTime; // 假设 this.systemTime 已经是秒级时间戳
				// 计算 createTime 加7天的时间戳
				const sevenDaysLater = createTime + 7 * 24 * 60 * 60; // 7天对应的秒数
				// 计算差值
				const timeDifference = sevenDaysLater - systemTime;
				this.time = Math.floor(timeDifference * 1000);
				let pic = data.data.drawVideo;
				this.srcUrl = monDetailUrl + '?id=' + pic;
			}
			this.getDna();
		},
		async getTree() {
			const data = await getBreedTree(this.mondetail.number);
			console.log(data, '孩子');
			this.parents = data.data.parents || [];
			this.children = data.data.children || [];
		},
		onHunt() {
			this.$modal.showToast('上任中暂不可寄售');
		},
		goparentsDetail(item) {
			uni.navigateTo({
				url: `/pages/consignment/cangHouse?familyId=${item.id}&isParents=1&id=${this.id}` // 跳转到寄售页面
			});
		},
		gomarket() {
			console.log(this.mature);
			if (this.mature == 1) {
				uni.setStorageSync('marketIndex', 0);
			} else if (this.mature == 0) {
				uni.setStorageSync('marketIndex', 2);
			}
			uni.switchTab({
				url: `/pages/work/market` // 跳转到市场
			});
		},
		goMonPurchase() {
			console.log(this.mondetail, '详情');
			uni.navigateTo({
				url: `/pages/consignment/MonPurchase?drawVideo=${this.mondetail.drawVideo}&id=${this.mondetail.id}&hashValue=${this.mondetail.hashValue}&number=${this.mondetail.number}&price=${this.mondetail.price}&subject=${this.mondetail.subject}` // 跳转到寄售页面
			});
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .u-count-down__text {
	color: #fff !important;
	line-height: 77rpx !important;
}
.conter {
	padding: 10rpx 34.88rpx;
	.boutone {
		color: #ffffff;
		font-size: 38rpx;
		font-weight: 800;
		font-family: 'font';
		margin: 34.88rpx 0;
	}
	// 详细
	.love {
		width: 680rpx;
		height: 370rpx;
		margin: 34.88rpx 0;
		background: #211f30;
		border-radius: 14rpx;
		border: 1rpx solid #3c424d;
		padding: 20rpx 34.88rpx;
		.zheng {
			color: #ffffff;
			font-weight: 800;
			font-size: 42rpx;
			font-family: 'font';
		}
		.xiang {
			display: flex;
			color: #8a92a3;
			margin: 10rpx 100rpx;
			font-size: 28rpx;
			font-weight: 400;
			align-items: center;
			position: absolute; //脱离文档
			font-family: 'font';
			border-radius: 9rpx;
			background: #282c34;
			padding: 5rpx 8rpx 5rpx 8rpx;
			box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
		}
		.popo_box {
			display: flex;
			margin: 35rpx 0 0;
			align-items: center;
			justify-content: space-between;
			.image_box {
				display: flex;
				align-items: center;
				.ioverui {
					width: 105rpx;
					height: 105rpx;
					border-radius: 50%;
					border-radius: 50%;
					object-fit: cover;
				}
				.iove_box {
					font-size: 28rpx;
					color: #ffffff;
					font-weight: 500;
					font-family: 'font';
					margin: 0 20rpx;
				}
			}
			.price {
				color: #ffffff;
				font-weight: 500;
				font-size: 28rpx;
				font-family: 'font';
			}
		}
		.sale-btn {
			display: flex;
			justify-content: space-between;
			.sub-btn {
				width: 290rpx;
				height: 77rpx;
				background: linear-gradient(90deg, #3adfeb 0%, #4463ff 100%);
				box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
				border-radius: 14rpx;
				line-height: 80rpx;
				margin-right: 40rpx;
				margin: 40rpx 0;
				text-align: center;
				font-size: 28rpx;
				font-family: 'font';
				font-weight: 400;
				color: #ffffff;
			}
			.fuhua {
				width: 680rpx;
				height: 77rpx;
				background: linear-gradient(90deg, #3adfeb 0%, #4463ff 100%);
				box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
				border-radius: 14rpx;
				line-height: 80rpx;
				margin-right: 40rpx;
				margin: 40rpx 0;
				font-size: 28rpx;
				text-align: center;
				font-family: 'font';
				font-weight: 400;
				color: #ffffff;
			}
		}
	}
	// 详细
	// 性状
	.Traits_box {
		width: 680rpx;
		height: 200rpx;
		background: #15142d;
		border-radius: 14rpx;
		padding: 20rpx 34.88rpx;
		margin-bottom: 34.88rpx;
	}
	// 性状
	// 家谱
	// 家谱
	.genealogy_box {
		width: 680rpx;
		background: #211f30;
		border-radius: 14rpx;
		border: 1rpx solid #3c424d;
		padding: 30rpx 0;
		margin-bottom: 34.88rpx;
		.boutne {
			color: #ffffff;
			font-size: 38rpx;
			font-weight: 800;
			font-family: 'font';
			margin: 0 44rpx 20rpx;
		}
		.parents {
			color: #ffffff;
			font-size: 30rpx;
			font-weight: 400;
			font-family: 'font';
			text-align: center;
			margin-bottom: 20rpx;
		}
		.nextBreedCost1 {
			width: 550rpx;
			height: 610rpx;
			color: #fff;
			border-radius: 14rpx;
			border: 2rpx solid #22262d;
			background-color: #1c1f25;
			padding-top: 34.88rpx;
			padding-left: 20rpx;

			.site_box {
				margin-top: 110rpx;

				view {
					margin: 0 0 20rpx 0;
				}
			}

			.all_box {
				width: 420rpx;
				margin-left: 10rpx;
			}
		}
		.mon_baby {
			width: 620rpx;
			height: 150rpx;
			display: flex;
			padding: 22rpx;
			margin: 0 34.88rpx;
			position: relative;
			border-radius: 14rpx;
			margin-bottom: 20rpx;
			background-color: #21242b;
			border: 1rpx solid #282c34;
			image {
				width: 90rpx;
				height: 90rpx;
				border-radius: 14rpx;
			}
			.number_mon {
				margin: 0 34.88rpx;
				.babymon_number {
					display: inline-block;
					padding: 5rpx 10rpx 2rpx 10rpx;
					border-radius: 8rpx;
					background-color: #2f3041;
					margin-top: 20rpx;
				}
			}
		}
		.children-box {
			display: flex;
			white-space: nowrap;
			overflow: scroll;
			margin-left: 10rpx;
			.disabledone {
				position: relative;
				.disabledtow {
					top: 20rpx;
					left: 40rpx;
					height: 39rpx;
					display: flex;
					color: #46a6f8;
					align-items: center;
					font-size: 24rpx;
					font-family: 'font';
					font-weight: 400;
					border-radius: 9rpx;
					position: absolute;
					padding: 0 10rpx 0 10rpx;
					background: rgba(40, 44, 52, 0.8);
				}
				.disabledtow1 {
					color: #fff;
					width: 103rpx;
					height: 40rpx;
					bottom: 10rpx;
					left: 110rpx;
					font-size: 24rpx;
					transform: scale(0.8);
					font-family: 'font';
					text-align: center;
					font-weight: 400;
					line-height: 40rpx;
					border-radius: 9rpx;
					position: absolute;
					background: rgba(40, 44, 52, 0.8);
				}
			}
		}
	}
	// 家谱
	// 近期活动
	.activities_box {
		width: 680rpx;
		background: #211f30;
		border-radius: 14rpx;
		border: 1rpx solid #3c424d;
		margin-bottom: 34.88rpx;
		padding: 30rpx 25rpx;
		.boutne {
			color: #ffffff;
			font-size: 38rpx;
			font-weight: 800;
			font-family: 'font';
			margin: 0 10rpx 20rpx;
		}
		.disabledone {
			width: 630rpx;
			height: 280rpx;
			border-radius: 14rpx;
			margin-bottom: 34.88rpx;
			background-color: #21242b;

			.popo {
				width: 630rpx;
				height: 80rpx;
				display: flex;
				padding: 0 20rpx 0 20rpx;
				justify-content: space-between;
				border-bottom: 1rpx solid #333;
				view {
					color: #8a92a3;
					line-height: 80rpx;
					font-family: 'font';
				}
			}
			.conterakpap {
				width: 630rpx;
				display: flex;
				padding: 20rpx 20rpx 0 20rpx;
				justify-content: space-between;
			}
		}
	}
	// 近期活动
}
</style>
